<template>
  <div class="home-container layout-pd">
    <top />
    <div style="height: 10px; background-color: rgba(0, 0, 0, 0.04)"></div>
    <middle />
    <div style="height: 10px; background-color: rgba(0, 0, 0, 0.04)"></div>
    <div style="flex: 1">
      <bottom />
    </div>
  </div>
</template>

<script setup>
import top from "@/views/home/top.vue";
import middle from "@/views/home/middle.vue";
import bottom from "@/views/home/bottom.vue";
import {  TinyModal } from '@opentiny/vue'
import {ref,onMounted,onActivated,onDeactivated,reactive,computed} from 'vue'
import tool from "@/utils/tool";
const fApi = ref({})
const formModel = ref({})

const see = () => {
}
const rules = ref([
  {
    field: 'menu',idField:'menuId', title: 'x1',com: 'JSelect',cat: 'admin',
    width: 300,
    events: {
      change: (val) => {

      },
      enter: () => {

      }
    }
  },
])

onMounted(() => {
  height.value = window.innerHeight - 40

})
const btnClick = () => {
}

const options = ref({
  resize: true,
  width: 800,
  height: 400,
  minWidth: 700,
  minHeight: 300
})

const save = () => {
}


const val = ref('')
const id = ref(0)
const activeName = ref('first')
const height = ref(500)
const items = ref([
  {text: '销售单', count: 1},
  {text: '销售退货单', count: 1},
  {text: '销售换货单', count: 1},
  {text: '购货单', count: 1},
  {text: '购货退货单', count: 1},
  {text: '收款单', count: 1},
  {text: '付款单', count: 1},
  {text: '其他收入单', count: 1},
  {text: '其他支出单', count: 1},
])
const coms = computed(() => {
  return height.value + 1
})



onActivated(() => {
  window.addEventListener('resize', setHeight)
})
onDeactivated(() => {
  window.removeEventListener('resize', setHeight)
})

const setHeight = () => {
  height.value = window.innerHeight - 50
}


</script>
<style scoped lang="scss">
.home-container {
	background-color: white;
	display: flex;
	flex-direction: column;
}
.top {
	padding: 20px;
}
</style>